import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Dimensions, StyleSheet } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { getSettlementMethod, unitList } from 'src/utils/ConfigUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
const SCREENW = Dimensions.get('window').width

export default class JobCell extends React.PureComponent {
  static propTypes = {
    item: PropTypes.object,
    index: PropTypes.number,
    jobClick: PropTypes.func,
    jumpFn: PropTypes.func
  }

  render () {
    const { item = {} } = this.props
    const basicInfo = item.basicInfoModel
    const settlementMethod = (basicInfo.type == 0 ? { unit: `元/${unitList[(basicInfo.unit !== '' && basicInfo.unit !== undefined) ? basicInfo.unit : (basicInfo.settlementMethod * 1 + 1)]}` } : getSettlementMethod(basicInfo.settlementMethod))
    let palce = null
    if (basicInfo.workPlace && basicInfo.workPlace.place && basicInfo.workPlace.place[0]) {
      palce = basicInfo.workPlace.place[0]
    }
    return (
      <CustomButton style={styles.cell} onPress={this.cellClick}>
        <View style={styles.top}>
          <View style={styles.topLeft}>
            <Text style={styles.name}>{basicInfo.name}</Text>
            {basicInfo.type === 1 && <CustomImage style={styles.tagImg} source={require('@/imgC/home/tag_quanzhi.png')} />}
            {basicInfo.type === 0 && <CustomImage style={styles.tagImg} source={require('@/imgC/home/tag_jianzhi.png')} />}
            {basicInfo.practiceLabel === 1 && <CustomImage style={styles.tagImg} source={require('@/imgC/home/tag_shixi.png')} />}
          </View>
          {/* <View style={styles.topRight}> */}
          <View>
            {item.isFast === 1 && <CustomImage style={styles.tagImg} source={require('@/imgC/home/tag_fast.png')} />}
          </View>
        </View>
        {/* </View> */}
        <View style={styles.viewPrice}>
          <Text style={styles.price}>
            {basicInfo.salary}
          </Text>
          <Text style={styles.unit}>
            {settlementMethod.unit}
          </Text>
        </View>
        <View style={styles.bottom}>
          <View style={styles.bottomLeft}>
            {!!palce && <View style={styles.tagView} ><Text style={styles.tagText}>{palce}</Text></View>}
            <View style={styles.tagView} ><Text style={styles.tagText}>{settlementMethod.short}</Text></View>
            <View style={styles.tagView} ><Text style={styles.tagText}>{basicInfo.category}</Text></View>
          </View>
          {/* todo 面试状态 */}
          {!!basicInfo.interviewState && <Text style={styles.bottomRight}>已面试</Text>}
        </View>
      </CustomButton>
    )
  }
}

const styles = StyleSheet.create({
  cell: {
    flex: 1,
    width: SCREENW - ScaleS(40),
    paddingTop: ScaleS(25),
    paddingBottom: ScaleS(15),
    marginHorizontal: ScaleS(20),
    borderBottomWidth: ScaleS(1),
    borderStyle: 'solid',
    borderColor: 'rgba(120, 120, 120, .1)'
  },
  top: {
    // width: '100%',
    flexDirection: 'row',
    // justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  topLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  name: {
    fontSize: ScaleT(19),
    fontWeight: '500',
    color: '#000000',
    lineHeight: ScaleS(29),
    minHeight: ScaleS(29),
    maxWidth: ScaleS(190)
  },
  tagImg: {
    marginTop: ScaleS(4),
    marginLeft: ScaleS(4),
    width: ScaleS(18),
    height: ScaleS(21),
    resizeMode: 'cover'
  },
  topRight: {
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  viewPrice: {
    flexDirection: 'row'
  },
  price: {
    textAlign: 'right',
    marginHorizontal: ScaleS(3),
    height: ScaleS(28),
    fontSize: ScaleT(24),
    fontWeight: 'bold',
    color: '#FFC61C',
    lineHeight: ScaleS(28)
  },
  unit: {
    marginTop: ScaleS(9),
    height: ScaleS(17),
    fontSize: ScaleT(12),
    fontWeight: '500',
    color: '#444444',
    lineHeight: ScaleS(17)
  },
  bottom: {
    marginTop: ScaleS(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  bottomLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start',
    flexWrap: 'wrap'
  },
  tagView: {
    marginRight: ScaleS(15),
    paddingHorizontal: ScaleS(16),
    height: ScaleS(28),
    backgroundColor: 'rgba(216,216,216,0.2)',
    borderRadius: ScaleS(14)
  },
  tagText: {
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#999999',
    lineHeight: ScaleS(28)
  },
  bottomRight: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#444444',
    lineHeight: ScaleS(28)
  }
})
